<template>
	<ul class="subtree-ul" :class="subtreeDirClass">
		<li v-for="i in menulist" :key="i.name" class="subtree-li">
			<div v-if="i.menulist && i.menulist.length > 0" class="subtree-has-child">
				<div class="subtree-btn-wrapper" :class="{'sp-contextmenu-disable': !!i.disabled}">
					<i v-if="!i.icoName" class="subtree-nav-icon"></i>
					<svg-icon v-else :icon-class="i.icoName" class="subtree-nav-icon"></svg-icon>
					<span class="subtree-nav-name">{{i.btnName}}</span>
					<i :class="iconDirClass"></i>
				</div>
				<sp-contextmenu-tree v-if="!i.disabled" :menulist="i.menulist" :dir="dir"></sp-contextmenu-tree>
			</div>
			<div v-else @click.stop="!i.disabled ? fnHandler(i) : ''" class="subtree-leaf-btn subtree-btn-wrapper"
				 :class="{'sp-contextmenu-disable': !!i.disabled}">
				<i v-if="!i.icoName" class="subtree-nav-icon"></i>
				<svg-icon v-else :icon-class="i.icoName" class="subtree-nav-icon"></svg-icon>
				<span class="subtree-nav-name">{{i.btnName}}</span>
			</div>
		</li>
	</ul>
</template>
<script>
	module.exports = {
		name: 'sp-contextmenu-tree',
		props: ['menulist', 'dir'],
		methods: {
			fnHandler(item) {
				if (item.fnHandler && typeof item.fnHandler === 'function') {
					var obj = window.SPContextmenu;
					var arg = { menuItem: item, target: obj.target, menuName: obj.menuName };
					item.fnHandler(arg);
				}
			}
		},
		computed: {
			subtreeDirClass() {
				return 'spcontextmenu-subtree-dir-' + this.dir;
			},
			iconDirClass() {
				return (this.dir === 2 || this.dir === 3) ? 'sp-contextmenu-right-icon' : 'sp-contextmenu-left-icon';
			}
		}
	};
</script>